<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="../../bootstrap-4.0.0-dist/css/bootstrap.css" >
    <title>Hello, world!</title>
  </head>
  <body>
    栅格系统整个分成了12分,是相对于父亲,这里设置了一整行
    <div class="row">
      <div class="col-sm-4" style="background:red">
          左边
      </div>
      <div class="col-sm-4" style="background:yellow">
          中间
      </div>
      <div class="col-sm-4" style="background:blue">
          右边
      </div>
    </div>
    栅格系统整个分成了12分,是相对于父亲,这里设置了宽度500px
    <div class="row" style="width:500px">
      <div class="col-sm-4">
          左边
      </div>
      <div class="col-sm-4">
          中间
      </div>
      <div class="col-sm-4">
          右边
      </div>
    </div>
    列偏移
    <div style="width:500px">
        <div class="row" >
            <div class="col-sm-2">用户名</div>
            <div class="col-sm-10"><input type="text" /></div>
        </div>
        <div class="row">
            <div class="col-sm-2">密码</div>
            <div class="col-sm-10"><input type="text" /></div>
        </div>
        <div class="row" >
            <div class="col-sm-2"></div>
            <div class="col-sm-10"><input type="button" value="提 交" /></div>
        </div>
        <div class="row" >
            <div class="offset-sm-2 col-sm-10"><input type="button" value="提 交" /></div>
        </div>
    </div>
  </body>
</html>